<template>
  <div id="app">
    <p>欢迎光临_vue开发的收银系统_水果店</p>
    <div class="pb">
      <h3>苹果10￥/斤，折扣<8折></h3>
    </div>
    <div class="pb">
      <span>请输入你要购买的斤数</span><input type="text" v-model="num" />
    </div>
    <div class="pb">
      <button @click="btn">结账买单</button>
    </div>
    <div class="pb"></div>
    <div class="pb">
      <span>结账单:总结：</span><strong>{{ num * 10 }}</strong
      ><span>￥元折后价:</span><strong>{{ num * 10 * 0.8 }}</strong
      ><span>￥元省了:</span><strong>{{ num * 10 - num * 10 * 0.8 }}</strong
      ><span>￥元</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: "",
    };
  },
  methods: {
    btn() {},
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#app {
  margin: 100px auto;
  text-align: center;
}
#app .pb {
  border: 1px solid #ccc;
}
</style>